<template>
	<view>
		<view class="example-body">
			<uni-nav-bar :statusBar="true" 
			left-icon="arrowleft" 
			backgroundColor="#fff1e6"
			@clickRight="releaseSubmit"  
			@clickLeft="back">
				
				<template v-slot:default>
					<view class="nav-bar-title">
						发表话题
					</view>
				</template>
				<template v-slot:right>
					<view class="right-icon iconfont icon-fasong"></view>
				</template>
			</uni-nav-bar>
		</view>
		
		<scroll-view scroll-y="true" :style="{'height': scrollViewHeight + 'px','padding':'0 0 10px 0'}">
			<view class="avatr-container">
				<avatar 
				:showAttention="false" 
				:showPostedTime="false"
				:avatarUrl="$store.user.avatarUrl"
				:nickname="$store.user.nickName"
				:nickNameSize='30'></avatar>
			</view>
			
			<view class="release-content uni-textarea">
				<text>话题标题：</text>
				<input type="text" v-model="topicTitle" placeholder="请输入话题标题"/>
				<text>话题副标题</text>
				<input type="text" v-model="topicSubtitle" placeholder="请输入副标题标题"/>
				<text>话题描述：</text>
				<textarea :value="textareaValue" placeholder="记录一下美好生活吧~" @input="getValue"/>
				<text>话题封面：</text>
				<!-- 上传多图 -->
				<upload-img class="uploadImg" :imgNum="1" @getImgList="getCoverImage"  :imgList="coverImage"></upload-img>
				<text>话题配图：</text>
				<!-- 上传多图 -->
				<upload-img class="uploadImg" @getImgList="getImgList"  :imgList="imageList"></upload-img>
			</view>
			
			
		
			<view class="choose-classify">
				<block v-for="(item, index) in classifyList" :key="index">
					<view class="classify-item" :data-id='item.id' @click="chooseClassify(item.id)" :class="item.id == classifyId ? 'active-classify':''">
						<text class="classify-item-text">{{item.classifyName}}</text>
					</view>
				</block>
			</view>	
		</scroll-view>
		<!-- 弹出提示框 -->
		<uni-popup ref="popup" type="center" animation @change="change">
			<view class="popup-content">
				<image src="../../static/imgs/tishi.png" mode="heightFix" lazy-load/>
				<view class="text-title">
					严禁发表一下信息
				</view>
				<view class="text-content">
					<view>
						1、涉及黄色、政治、广告及骚扰信息
					</view>
					<view>
						2、涉及人身攻击、恶意侮辱他人信息
					</view>
					<view>
						3、未经他人允许，私自透露他人隐私
					</view>
					<view>
						一经核实，情节严重永久封禁
					</view>
				</view>
				<view class="hidden-btn" @click="hiddenpopup">
					我是三好青年
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
	import uploadImg from '@/components/upload_img/upload_img.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue';
	import avatar from '@/components/avatar/avatar.vue';
	import {Topic} from '@/model/topic.js';
	import {UploadFile} from '@/model/uploadFile.js';
	
	export default {
		data() {
			return {
				authority:"所有人可见",
				textNum:0,
				textareaValue:'',
				imageList:[],
				classifyList:[],
				coverImage:[],
				classifyId:-1,
				topicTitle:"",
				topicSubtitle:"",
				scrollViewHeight:500,
				shareTopic:{
					uid:'',
					nickName:'',
					avatarUrl:'',
					coverImg:'',
					topicImgList:'',
					topicTitle:'',
					topicSubtitle:'',
					topicContent:'',
					topicClassifyId:''
				}
			}
		},
		components:{
			uniNavBar,
			uniIcons,
			uniStatusBar,
			uploadImg,
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare,
			avatar
		},
		onLoad() {
			let res = uni.getSystemInfoSync()
			this.scrollViewHeight = res.windowHeight - 65
			this.getTopicClassify()
		},
		onReady() {
			this.toggle()
		},
		methods: {
			async getTopicClassify(){
				let res = await Topic.getTopicClassify({page:1,limit:10})
				this.classifyList = res.data.data
				this.classifyList.splice(0,3)
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			async releaseSubmit(){
				// console.log("发布")
				if(!this.textareaValue && !this.topicTitle && !this.topicSubtitle){
					uni.showToast({
						icon:'none',
						title:"请填写话题信息"
					})
					return
				}
				if(this.coverImage.length == 0){
					uni.showToast({
						icon:'none',
						title:"请选择话题封面"
					})
					return
				}
				if(this.classifyId == -1){
					uni.showToast({
						icon:'none',
						title:"请选择发表分类"
					})
					return
				}
				uni.showLoading({
					title:"文件上传中"
				})
				if(this.coverImage.length > 0){
					let res = await UploadFile.uploadFiles(this.coverImage.map((item,index)=>{
						return {
							name:'files' + index,
							uri:item,
						}
					}))
					if(res.code != 200){
						uni.showToast({
							icon:'none',
							title:"文件上传失败"
						})
						return
					}
					this.shareTopic.coverImg = res.data[0].fileUrl
				}
				
				if(this.imageList.length > 0){
					let res = await UploadFile.uploadFiles(this.imageList.map((item,index)=>{
						return {
							name:'files' + index,
							uri:item,
						}
					}))
					if(res.code != 200){
						uni.showToast({
							icon:'none',
							title:"文件上传失败"
						})
						return
					}
					this.shareTopic.topicImgList = JSON.stringify(res.data.map(item=>{return item.fileUrl}))
				}
				uni.showLoading({
					title:"正在发表"
				})
				this.shareTopic.topicTitle = this.topicTitle
				this.shareTopic.topicSubtitle = this.topicSubtitle
				this.shareTopic.topicContent = this.textareaValue
				this.shareTopic.topicClassifyId = this.classifyId
				this.shareTopic.uid = this.$store.user.uid
				this.shareTopic.nickName = this.$store.user.nickName
				this.shareTopic.avatarUrl = this.$store.user.avatarUrl
				let addRes = await Topic.addShare(this.shareTopic)
				if(addRes.code != 200){
					uni.showToast({
						icon:'none',
						title:addRes.message
					})
					return
				}
				uni.navigateBack({
					delta:1
				})
			},
			changeAuthority(){
				uni.showActionSheet({
				   itemList: ["所有人可见","仅自己可见","仅关注可见"],
					success: (res) =>{
						switch (res.tapIndex){
							case 0:
							this.authority = "所有人可见"
								break;
							case 1:
							this.authority = "仅自己可见"
								break;
							case 2:
							this.authority = "仅关注可见"
								break;
							default:
							this.authority = "所有人可见"
								break;
						}
					}
					
				});
			},
			getValue(e){
				this.textareaValue = e.detail.value
				this.textNum = e.detail.cursor
			},
			getImgList(e){
				this.imageList = e
			},
			getCoverImage(e){
				this.coverImage = e
			},
			change(e) {
				console.log(e)
			},
			toggle() {
				this.$refs.popup.open()
			},
			hiddenpopup(e){
				console.log(this.$refs.popup.showPopup = false)
			},
			chooseClassify(classifyId){
				this.classifyId = classifyId
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar-title{
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		.uni-icon{
			font-size: 32rpx !important;
		}
	}
	.choose-classify{
		border-top: 1rpx #f2f2f2 solid;
		padding-top: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
		width: 750rpx;
		display: flex;
		.classify-item{
			background-color: #F2F2F2;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			margin: 10rpx 20rpx;
			.classify-item-text{
				padding: 10rpx 20rpx;
				font-size: 30rpx;
			}
		}
		.classify-item.active-classify{
			background-color: $fun-theme-color;
		}
	}
	.uploadImg{
		top: 600rpx;
	}
	.release-content{
		width: 97%;
		margin: 15rpx auto;
		// height: 500rpx;
		border-radius: 10rpx;
		text{
			color: #333;
			font-size: 30rpx;
			margin: 10rpx 20rpx;
		}
		input{
			margin: 15rpx 20rpx;
			border: 1rpx #F2F2F2 double;
			font-size: 30rpx;
			padding: 10rpx;
			border-radius: 10rpx;
		}
		textarea{
			border: 1rpx #F2F2F2 double;
			width: calc(100% - 80rpx);
			margin: 10rpx auto;
		}
	}
	.release-content-row{
		display: flex;
		flex-direction: row-reverse;
		color: #969696;
		view{
			margin-right: 30rpx;
			font-size: 25rpx;
		}
	}
	.avatr-container{
		padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#fff1e6,#FFF);
	}
	.right-icon{
		font-size: 50rpx;
		color: #000;
	}
	.tags-container{
		margin: 10rpx;
		border-top: 1rpx #F2F2F2 solid;
		display: flex;
		flex-wrap: wrap;
		.tag-item{
			background-color: #F2F2F2;
			font-size: 26rpx;
			color: #888888;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			margin: 10rpx;
		}
	}
	.tags-show-container{
		margin: 10rpx 20rpx;
		.show-tag-item{}
	}
	.positioning-container{
		margin: 0 20rpx;
		font-size: 24rpx;
	}
	.popup-content{
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		width: 550rpx;
		image{
			height: 200rpx;
			display: block;
			margin: 10rpx auto;
		}
		.text-title{
			margin-top: 40rpx;
			text-align: center;
			color: #ffab03;
			font-weight: bolder;
		}
		.text-content{
			margin-top: 25rpx;
			font-size: 30rpx;
			color: #333;
			view{
				line-height: 50rpx;
				padding: 0 10rpx;
				&:last-child{
					text-align: center;
					margin-top: 15rpx;
					font-weight: bold;
				}
			}
			
		}
		.hidden-btn{
			text-align: center;
			padding: 20rpx 0;
			background-color: #F7AA28;
			color: #FFF;
			width: 80%;
			margin: 25rpx auto 10rpx auto;
			border-radius: 20rpx;
		}
	}
</style>
